<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Event bubbling</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
	<style>
		canvas{ background-color: #fff;}
	</style>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var stage,text;

	function init() {
		// create a stage object to work with the canvas. This is the top level node in the display list:
		var h = document.getElementById('header');
		var i = 0;
		stage = new createjs.Stage("testCanvas");
		stage.name = "stage";
        createjs.Touch.enable( this.stage );

		stage.on('stagemousedown',function(e) {
			h.innerHTML = i++;
		});
		// stage.canvas.addEventListener('touchstart',function() {
		// 	h.innerHTML = i++;
		// });

		// call update on the stage to make it render the current display list to the canvas:
		createjs.Ticker.addEventListener("tick", stage);
	}

	var lastPhase = 0;
	function handleClick(evt) {
		// clear the text if this is the first listener:
		if (evt.currentTarget == stage && (evt.eventPhase == 1 || evt.eventPhase == 2)) { text.text = ""; }
		if (evt.eventPhase != lastPhase) {
			text.text += ">> "+["capture", "target", "bubble"][evt.eventPhase-1]+" phase:\n";
			lastPhase = evt.eventPhase;
		}
		text.text += "type="+evt.type+" target="+evt.target.name+" eventPhase="+evt.eventPhase+" currentTarget="+evt.currentTarget.name+"\n";
	}
	</script>
</head>

<body onload="init();">

	<header id="header" class="EaselJS">

	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="320" height="300"></canvas>
	</div>
</body>
</html>
